<template>
	<!-- 
    swiper中的transfrom会使fixed失效,此时用height固定高度; 
    swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
    -->
	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
	<!-- top的高度等于悬浮菜单tabs的高度 -->
	<mescroll-uni :ref="'mescrollRef' + i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
		<!-- 数据列表 -->
		<order-list :list="list"></order-list>
	</mescroll-uni>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import MescrollMoreItemMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js';
import orderList from './order-list.vue';
import { getOrderList } from '@/apis/order_callback.js';
import store from '@/store';

import { mapState } from 'vuex';
// import orderList from '@/components/module/good.vue';
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	components: {
		orderList
	},
	data() {
		return {
			isUpLoading: false, // 上拉加载锁
			downOption: {
				auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
				offset: 80 // 增加下拉触发区域
			},
			upOption: {
				offset: 100,
				toTop: {
					// 确保加载完成后隐藏区域
					hide: () => this.mescroll.hideUpScroll() // 加载完成后隐藏
				},
				// auto: false, // 不自动加载
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 100 // 每页数据的数量
				},
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: '/static/mescroll-empty.png',
					tip: '~ 暂无数据 ~' // 提示
					// btnText: '去看看'
				},
				textNoMore: '没有更多了',
				onScroll: true, // 启用滚动监听
				auto: false,    // 开启自动加载
			},
			list: []
		};
	},

	computed: {
		...mapState(['userInfo']),

		// 这里可以根据 Vuex 或其他状态管理获取用户权限
		userPermissions() {
			// 假设从 Vuex 获取用户权限
			return this.userInfo.roles || [];
		},
		isLoggedIn() {
			// 假设从 Vuex 获取登录状态
			return this.userInfo.token;
		},
		userId() {
			return this.userInfo.id;
		}
	},

	props: {
		i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
		index: {
			// 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			type: Number,
			default() {
				return 0;
			}
		},
		tabs: {
			// 为了请求数据,演示用,可根据自己的项目判断是否要传
			type: Array,
			default() {
				return [];
			}
		},
		height: [Number, String], // mescroll的高度
		keyword: {
			type: String,
			default() {
				return '';
			}
		},
		status: {
			// 新增 status 属性
			type: String,
			default() {
				return '';
			}
		}
	},
	methods: {
		/*下拉刷新的回调 */
		downCallback() {
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			this.mescroll.resetUpScroll();
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			
			// 防抖处理：300ms内只允许触发一次
			if (this.isUpLoading) {
				return;
			}

			this.isUpLoading = true;

			//联网加载数据
			let orderStatus = this.tabs[this.i].status;
			let httpData = {
				page: page.num,
				limit: page.size
			};
			if (this.isLoggedIn) {
				let userRole = this.userPermissions[0].role_key;
				let userIdParam = this.userId;
				store.commit('setLoadingShow', true);
				httpData.v_order_field = 'create_datetime';
				httpData.v_order = 'desc';
				httpData.payment_status = 1;
				if (this.keyword){
					httpData.community = this.keyword;
				}

				switch (userRole) {
					case 'work':
						httpData.statusList = orderStatus;
						if (orderStatus == 'pending') {
							httpData.worker_id = null;
						} else {
							httpData.worker_id = userIdParam;
						}
						break;
					default:
						if (orderStatus[0] == 'all') {
							httpData.user_id = userIdParam;
						} else {
							httpData.statusList = orderStatus;
							httpData.user_id = userIdParam;
						}
						break;
				}
				this.getOrders(httpData, page);
			} else {
				this.isUpLoading = false;
				this.mescroll.endErr();
			}
		},
		//点击空布局按钮的回调
		emptyClick() {
			uni.showToast({
				title: '点击了按钮,具体逻辑自行实现'
			});
		},

		async getOrders(httpData, page) {
			getOrderList(
				httpData,
				(res) => {
					store.commit('setLoadingShow', false);
					// 设置列表数据
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(res);

					// 判断是否有下一页
					const hasNext = res.length >= page.size;

					// ★ 核心修改：只调用一次 endSuccess ★
					this.mescroll.endSuccess(res.length, hasNext);

					// ★ 如果是第一页（下拉刷新），结束下拉刷新状态 ★
					if (page.num === 1) {
						this.mescroll.endDownScroll();
					}

					// 重置加载锁
					this.isUpLoading = false;
				},
				(err) => {
					store.commit('setLoadingShow', false);
					// ★ 统一错误处理 ★
					if (page.num === 1) {
						// 下拉刷新失败
						this.mescroll.endDownScroll(false);
					} else {
						// 上拉加载失败
						this.mescroll.endErr();
					}

					// 重置加载锁
					this.isUpLoading = false;

					console.log(err);
					this.$refs.uToast.show({
						type: 'error',
						position: 'top',
						title: '错误',
						message: '获取失败'
					});
				}
			);
		},

		// 搜索
		doSearch() {
			this.list = []; // 先清空列表,显示加载进度
			this.mescroll.resetUpScroll();
		}
	}
};
</script>
